<template>
  <div>
    <el-dialog v-model="visible" :title="formData.form.title" center :close-on-click-modal="false"
      :close-on-press-escape="false" width="70%" style="min-height: 60%;">
      <div class="line_divider"></div>
      <div class="text-center mb-20px mt-25px" style="font-size:16px;color:#101010;">{{ list.topic }}</div>
      <div class="flex items-center justify-center" style="font-size:14px;">
        <div>发布人：{{ list.creator }}</div>
        <div class="ml-40px">发布时间：{{ formatTime(list.createTime, 'yyyy年MM月dd日') }}</div>
      </div>
      <div class="pl-20px pr-20px" style="line-height:30px;font-size:16px;text-align: justify;" v-html="list.content">
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import * as getTodoApi from '@/api/todoCenter/index'
import { formatTime } from '@/utils'
const formData = reactive({
  form: {
    title: '',
    id: ''
  }
})
const props = defineProps({
  visible: Boolean,
  editData: {
    type: Object
  }
})
const emit = defineEmits(['update:visible'])
const visible = computed({
  get: () => {
    return props.visible
  },
  set: (val) => emit('update:visible', val)
})
const optiontype = ref([])
const list = ref({})
watch(
  () => props.editData,
  (val) => {
    if (val) {
      formData.form.title = val.title
      formData.form.id = val.id
      list.value = val
    }
  },
  { immediate: true }
)
//获取公告消息详情
// const getNoticeData = () => {
//   getTodoApi.getNoticedetail(formData.form.id).then((res) => {
//     list.value = res;
//   })
// }

onMounted(() => { })
</script>
<style scoped>
::v-deep .el-dialog__body {
  padding: 0 0 10px 0 !important;
}

.line_divider {
  display: block;
  height: 1px;
  width: 100%;
  margin: 14px 0;
  border-top: 1px var(--el-border-color) var(--el-border-style);
}
</style>